<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymelef.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录页面</title>
</head>

<style>
    body{
        background-color: #f5f5f5;
    }

    form{
        width: 300px;
        margin: 0 auto;
    /*    垂直居中*/
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%,-50%);
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px #ccc;
    }
    img{
        width: 20px;
        height: 20px;
    }
    /*让form下的img和span在同一水平线上*/
    form img,span{
        vertical-align: middle;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    h3{
        text-align: center;
    }
    .input input{
        width: 200px;
    /*    水平居中*/
        margin: 0 auto;
        display: block;
    /*    内边距*/
        padding: 10px;
    }
    .loginbtn{
        width: 100px;
        margin: 0 auto;
        display: block;
        margin-top: 10px;
        padding: 10px;
    }
</style>
<body>
    <form th:action="@{/userLogin}" th:method="post" >
        <h3 >用户登录</h3>
        <div th:if="${param.error}" style="color: red;">
<!--            图片名字没改-->
            <img th:src="@{/img/error.png}" ><span>用户名密码错误，请重新登录</span>
        </div>
        <div class="input">
            <input type="text" name="name" placeholder="用户名" required/>
            <input type="password" name="password" placeholder="密码" required/>
        </div>
        <div>
            <label>
            <input type="checkbox" name="rememberme"/>
            记住我
            </label>
        </div>
        <input type="submit" value="登录" class="loginbtn"/>
    </form>

</body>
</html>